<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Akordeon-A Stylo Modern jQuery Accordion Plugin</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="../Scripts/accordion/accordion_jquery.akordeon.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#buttons').akordeon();
            $('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });
        });
    </script>
 
    <link href="../Scripts/accordion/accordion_demo.css" rel="stylesheet" type="text/css" />
    <link href="../Scripts/accordion/accordion_jquery.akordeon.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .demobar
        {
            height: 90px;
            line-height: 90px;
        }
        .demobar .fleft
        {
            float: left;
            margin-left: 10px;
        }
        .demobar .fright
        {
            float: right;
            margin-top: 14px;
            margin-right: 10px;
        }
    </style>
    
    
    
    
</head>
<body>
    <div id="demo-wrapper">
        <div class="akordeon" id="buttons">
            <div class="akordeon-item expanded">
                <div class="akordeon-item-head">
                    <div class="akordeon-item-head-container">
                        <div class="akordeon-heading">
                            SOUPS
                        </div>
                    </div>
                </div>
                <div class="akordeon-item-body">
                    <div class="akordeon-item-content">
                        <p>
                        <form id="formtimkiem" name="formtimkiem" method="get" action="">
						  <p> 
						    <input name="p" type="hidden" id="p" value="search" />
							<input name="tukhoa" id="tukhoa" onFocus="this.value=''" value="T? khóa tìm ki?m ..." 
							onBlur="if (this.value=='') this.value='T? khóa tìm ki?m ...'" type="text" class="tk" /> 
						  </p>
					      <p> <input type="image" name="btntk" id="btntk" src="images/icon_search.gif" /> </p>
						</form>
                        </p>
                    </div>
                </div>
            </div>
            <div class="akordeon-item">
                <div class="akordeon-item-head">
                    <div class="akordeon-item-head-container">
                        <div class="akordeon-heading">
                            Second Panel
                        </div>
                    </div>
                </div>
                <div class="akordeon-item-body">
                    <div class="akordeon-item-content">
						<p>
                        <form id="formtimkiem" name="formtimkiem" method="get" action="">
						  <p> 
						    <input name="p" type="hidden" id="p" value="search" />
							<input name="tukhoa" id="tukhoa" onFocus="this.value=''" value="T? khóa tìm ki?m ..." 
							onBlur="if (this.value=='') this.value='T? khóa tìm ki?m ...'" type="text" class="tk" /> 
						  </p>
					      <p> <input type="image" name="btntk" id="btntk" src="images/icon_search.gif" /> </p>
						</form>
                        </p>
                    </div>
                </div>
            </div>
            <div class="akordeon-item">
                <div class="akordeon-item-head">
                    <div class="akordeon-item-head-container">
                        <div class="akordeon-heading">
                            Third Panel
                        </div>
                    </div>
                </div>
                <div class="akordeon-item-body">
                    <div class="akordeon-item-content">
                        <p>
                            Nullam congue erat id felis tristique tincidunt. In tincidunt mi sit amet sapien
                            ornare facilisis. Suspendisse lacus elit, consequat non rutrum vel, vestibulum quis
                            libero. In elementum laoreet eros, faucibus rhoncus felis tempor eget. Maecenas
                            urna arcu, adipiscing vitae tempus id, gravida eu odio. Donec vestibulum feugiat
                            commodo. Duis quis ante massa.</p>
                        <p>
                            Nullam molestie, ligula quis tincidunt tincidunt, eros ipsum scelerisque lorem,
                            commodo fermentum tellus ligula sit amet sem. Phasellus quis nunc id velit egestas
                            malesuada nec eu nunc. Fusce nec metus vitae metus mattis volutpat.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </body>
</html>
